import { createComponent} from '../utils/component-factory'
import {typeOptions, sizeOptions, iconNames } from '../utils/Types'

/**
 * Element Plus Button 组件配置
 * 官方文档参考: https://element-plus.org/zh-CN/component/button.html
 */
export default createComponent({
  name: 'el-button',
  label: 'Button 按钮',
  category: 'Basic',
  description: '常用的操作按钮',
  canBeSlotContent: true,
  props: {
    // 类型与外观
    type: {
      label: '类型',
      type: 'select',
      default: '', // Element Plus默认值为''
      options: [
        { value: '', label: '默认' },
        ...typeOptions.button
      ],
      description: '按钮类型，支持primary/success/warning/danger/info'
    },
    size: {
      label: '尺寸',
      type: 'select',
      default: '', // 默认跟随父级尺寸
      options: sizeOptions,
      description: '按钮尺寸，支持large/default/small'
    },
    plain: {
      label: '朴素按钮',
      type: 'boolean',
      default: false,
      description: '是否为朴素按钮'
    },
    round: {
      label: '圆角按钮',
      type: 'boolean',
      default: false,
      description: '是否为圆角按钮',
      editorProps: {
        component: 'el-switch',
        activeText: '圆角',
        inactiveText: '直角'
      }
    },
    circle: {
      label: '圆形按钮',
      type: 'boolean',
      default: false,
      description: '是否为圆形按钮'
    },
    // 状态
    disabled: {
      label: '禁用状态',
      type: 'boolean',
      default: false,
      description: '是否禁用按钮'
    },
    loading: {
      label: '加载状态',
      type: 'boolean',
      default: false,
      description: '是否显示加载中状态'
    },
    autofocus: {
      label: '自动聚焦',
      type: 'boolean',
      default: false,
      description: '是否默认聚焦'
    },
    // 内容
    icon: {
      label: '图标',
      type: 'icon-select',
      default: '',
      description: '按钮图标组件',
      editorProps: {
        options: iconNames,
        clearable: true,
        placeholder: '选择图标'
      }
    },
    text: {
      label: '文字按钮',
      type: 'boolean',
      default: false,
      description: '是否为文字按钮'
    },
    link: {
      label: '链接按钮',
      type: 'boolean',
      default: false,
      description: '是否为链接按钮'
    },
    // 原生属性
    nativeType: {
      label: '原生类型',
      type: 'select',
      default: 'button',
      options: [
        { value: 'button', label: '普通按钮' },
        { value: 'submit', label: '提交按钮' },
        { value: 'reset', label: '重置按钮' }
      ],
      description: '原生button元素的type属性'
    },
    // 新增属性
    color: {
      label: '按钮颜色',
      type: 'color',
      default: '',
      description: '自定义按钮颜色'
    },
    dark: {
      label: '暗黑模式',
      type: 'boolean',
      default: false,
      description: '是否为暗黑模式'
    },
    tag: {
      label: '标签名',
      type: 'text',
      default: 'button',
      description: '自定义标签名'
    },
    loadingIcon: {
      label: '加载图标',
      type: 'icon-select',
      default: '',
      description: '自定义加载中图标',
      editorProps: {
        options: iconNames,
        clearable: true,
        placeholder: '选择加载图标'
      }
    },
    border: {
      label: '显示边框',
      type: 'boolean',
      default: false,
      description: '是否显示边框'
    },
    borderStyle: {
      label: '边框样式',
      type: 'select',
      default: 'solid',
      description: '设置边框样式',
      options: [
        { value: 'solid', label: '实线' },
        { value: 'dashed', label: '虚线' },
        { value: 'dotted', label: '点线' },
        { value: 'double', label: '双线' },
        { value: 'groove', label: '3D凹槽' },
        { value: 'ridge', label: '3D凸起' },
        { value: 'inset', label: '3D内嵌' },
        { value: 'outset', label: '3D外嵌' }
      ]
    },
    borderColor: {
      label: '边框颜色',
      type: 'color',
      default: '#dcdfe6',
      description: '设置边框颜色'
    },
    borderWidth: {
      label: '边框宽度',
      type: 'text',
      default: '1px',
      description: '设置边框宽度，如1px、2px等'
    },
    borderRadius: {
      label: '圆角半径',
      type: 'text',
      default: '4px',
      description: '设置边框圆角半径，如4px、50%等'
    }
  },
  events: {
    click: {
      description: '点击按钮时触发',
      payload: 'MouseEvent'
    }
  },
  slots: {
    default: {
      description: '按钮内容',
      default: '按钮'
    },
    loading: {
      description: '自定义加载中组件'
    },
    icon: {
      description: '自定义图标组件'
    }
  }
})